<template>
  <view class="wrap">
    <view
      class="bg-left"
      :style="{
        'background-image': 'url(/static/login-bg.png)',
        'background-size': '100% 100%',
      }"
    >
    </view>
    <view class="content">
      <view class="title" @click="debug">助餐消费机</view>
      <view class="input-account">
        <input
          type="txt"
          v-model="from.username"
          placeholder="请输入账号"
          placeholder-style="color:#bbbbbb"
          always-embed
      /></view>

      <view class="pwd-input input-account">
        <input
          v-if="from.pwdshow"
          type="txt"
          v-model="from.password"
          placeholder="请输入密码"
          placeholder-style="color:#bbbbbb"
          always-embed
        />
        <input
          v-else
          type="password"
          v-model="from.password"
          placeholder="请输入密码"
          placeholder-style="color:#bbbbbb"
          always-embed
        />
        <u-icon
          :name="!from.pwdshow ? 'eye-fill' : 'eye-off'"
          @click="from.pwdshow = !from.pwdshow"
          size="16rpx"
        ></u-icon>
      </view>
      <view class="tips"></view>
      <button @tap="submit" :disabled="!(from.username && from.password)" :style="[inputStyle]" class="getCaptcha">
        登录
      </button>
      <view class="alternative"> </view>
    </view>

    <view class="absolute bottom-10rpx left-10rpx" @click="toInfoPage">
      <u-icon name="fingerprint" color="lightgray" label-color="lightgray" :label="deviceId"></u-icon>
    </view>
  </view>

  <resultPopup ref="refCommonPopup" :show-icon="false">
    <template #default="{ result }">
      <view class="p-10rpx my-30rpx flex-col items-center justify-center text-center"> {{ result.content }} </view>
    </template>
    <template #confirm="{ config }">
      <view class="btns flex">
        <!-- <view class="btns-item" @click="refCommonPopup.close()">
          <text class="btns-item-txt"> 取消 </text>
        </view> -->
        <view class="btns-item confirm" @click="refCommonPopup.close()">
          <text class="btns-item-txt"> 确定 </text>
        </view>
      </view>
    </template>
  </resultPopup>
</template>
<script setup>
import { getDeviceSerialNumber } from "@/utils/util";
import { computed, ref, onMounted, reactive } from "vue";
import { useStore } from "vuex";
import loginInit from "@/common/init/loginInit";
import { deviceDetail } from "@/api";
import resultPopup from "@/components/common-popup/result-popup.vue";
import { openSubScreen } from "@/utils/sceeenUtils";

const loading = ref(true);

const store = useStore();

const from = reactive({
  username: "",
  password: "",
  pwdshow: false,
});

const inputStyle = computed(() => {
  const style = {};

  if (from.username && from.password) {
    style.color = "#fff";
    style.backgroundColor = "var(--kui-color-theme)";
  }
  return style;
});

onMounted(async () => {
  // 设置默认副屏
  openSubScreen();

  const { account } = store.getters.loginInfo;
  // 自动填充账号
  if (account) {
    from.username = account;
  }

  deviceId.value = (await getDeviceSerialNumber()) || "未获取到设备id";

  // 开发环境的调试
  if (process.env.NODE_ENV === "development") {
    // 自动填充账号
    from.username = "河南城云科技有限公司";
    from.password = "yl2022**";

    // #ifdef H5
    window.thePageDate = {
      deviceId: deviceId,
    };
    // #endif
  }
});

const refCommonPopup = ref();

const submit = async () => {
  try {
    uni.showLoading({ title: "登录中..." });

    // 登陆成功后，查询该设备是否已绑定本账号

    const payload = {
      username: from.username,
      password: from.password,
    };

    await store.dispatch("user/login", payload);
    uni.hideLoading();

    // #ifdef H5
    if (import.meta.env.DEV) {
      console.warn("开发环境，直接跳转首页");
      return uni.reLaunch({ url: import.meta.env.VITE_PAGE_HOME });
    }
    // #endif

    // uni.reLaunch({ url: import.meta.env.VITE_PAGE_HOME });
    try {
      const { data, success } = await deviceDetail(deviceId.value);

      if (!success) throw new Error("查询设备信息失败");
      if (data.records.length == 0) throw new Error("该设备未绑定商家");

      console.log("跳转首页", import.meta.env.VITE_PAGE_HOME);
      uni.reLaunch({ url: import.meta.env.VITE_PAGE_HOME });
      loginInit.onLogined();
    } catch (error) {
      console.error(error);
      const popupConfig = {
        title: "提示",
        content: "该设备未绑定商家, 无法使用",
        confirmText: "确认",
        autoClose: false,
        //----- 自定义数据
        onClose: () => {
          store.dispatch("user/logout", { isReLaunch: false });
        },
      };
      refCommonPopup.value.open(popupConfig);
      throw error;
    }
  } catch (error) {
    uni.hideLoading();
    console.error(error);
  }
};

// 密码登录
const loginForMsg = () => {
  uni.navigateBack();
};
// 遇到问题
const issue = () => {
  uni.navigateTo({ url: "/pages/subFeeback/feedbackIndex/feedbackIndex" });
};

// 打开调试页面
const debugCount = ref(0);
const debug = () => {
  if (!debugCount.value) debugCount.value = 0;
  debugCount.value++;
  if (debugCount.value < 5) return;
  uni.navigateTo({
    url: `/pages/subSetting/debug/debug`,
  });
};

const deviceId = ref("");

const toInfoPage = () => {
  uni.navigateTo({
    url: "/pages/subSetting/setting/app-info",
  });
};
</script>
<style lang="scss" scoped>
.wrap {
  font-size: 28rpx;
  background: white;
  display: flex;
  flex-direction: row;
  height: 100vh;

  .bg-left {
    flex: 2;
  }

  .content {
    flex: 1;
    padding: 30rpx;

    .title {
      text-align: center;
      font-size: 20rpx;
      font-weight: bold;
      margin-bottom: 100rpx;
    }

    .pwd-input {
      display: flex;
      flex-direction: row;
    }

    .input-account {
      flex: auto;
      font-weight: bold;
      color: var(--kui-color-theme);
      position: relative;
      padding: 10rpx;
      border: 1px solid #c6c6c6;
      border-radius: 5rpx;
      font-size: 15rpx;
      margin-bottom: 10rpx;
    }

    input {
      text-align: left;
      font-size: 15rpx;
    }

    .tips {
      color: #c6c6c6;
      margin-bottom: 30rpx;
      margin-top: 8rpx;
    }

    .getCaptcha {
      background-color: $kui-color-theme-light;
      color: white;
      border: none;
      font-size: 15rpx;

      &::after {
        border: none;
      }
    }

    .alternative {
      color: $uni-text-color-grey;
      display: flex;
      justify-content: space-between;
      margin-top: 20rpx;
    }
  }

  .buttom {
    position: relative;
    z-index: 1;

    .loginType {
      display: flex;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: $uni-text-color;
        font-size: 28rpx;
      }
    }

    .hint {
      padding: 20rpx 40rpx;
      font-size: 25rpx;
      color: $uni-text-color-grey;

      .link {
        color: var(--kui-color-theme);
      }
    }
  }
}

.simplify-bg {
  background-image: radial-gradient($kui-color-theme, transparent 63%);
  width: 230px;
  height: 288px;
  transform: rotateZ(243deg);
  position: absolute;
  left: 0px;
  top: -120px;
  opacity: 0.8;
  filter: blur(80rpx);
  z-index: 0;

  &.bottom {
    left: auto;
    top: auto;
    right: -120px;
    bottom: 50px;
    background-image: radial-gradient($kui-color-theme, transparent 33%);
  }

  .bg-after {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#0c0c0c00 2px, #ffffff 2px);
    background-size: 4px 4px;
    backdrop-filter: blur(20px);
  }
}

.logo {
  filter: brightness(1.5);

  img {
    width: 260rpx;
    height: 100rpx;
  }
}

/** 这是弹窗按钮的样式 */
@import "@/components/common-popup/btns.scss";
</style>
